<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" ><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" ><!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML.it - Guida Bootstrap 3 - Demo - Portfolio</title>
<!-- Fogli di stile -->
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-glyphicons.css">
<link rel="stylesheet" href="assets/plugins/fancybox/jquery.fancybox.css">
<link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css">
<link rel="stylesheet" href="assets/css/stili-custom.css">
<!-- Modernizr -->
<script src="assets/js/modernizr.custom.js"></script>
<!-- respond.js per IE8 -->
<!--[if lt IE 9]>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Header e barra di navigazione -->
<!-- Header e barra di navigazione -->
<header>
<nav class="navbar navbar-default">
<div class="container">
 <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">HTML.it</a>
 </div> 
 <div class="collapse navbar-collapse navbar-responsive-collapse">
   <ul class="nav navbar-nav">
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Progetti <span class="caret"></span></a>
     <ul class="dropdown-menu">
      <li><a href="#">Menu Item 1</a></li>
      <li><a href="#">Menu Item 2</a></li>
      <li><a href="#">Menu Item 3</a></li>
      <li><a href="#">Menu Item 4</a></li>
      <li><a href="#">Menu Item 5</a></li>
      <li><a href="#">Menu Item 6</a></li>
     </ul>
    </li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Servizi <span class="caret"></span></a>
     <ul class="dropdown-menu">
      <li><a href="#">Menu Item 1</a></li>
      <li><a href="#">Menu Item 2</a></li>
      <li><a href="#">Menu Item 3</a></li>
      <li><a href="#">Menu Item 4</a></li>
      <li><a href="#">Menu Item 5</a></li>
      <li><a href="#">Menu Item 6</a></li>
     </ul>
    </li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="contatti.html">Contatti</a></li>
   </ul>
 </div><!-- /.nav-collapse -->
</div>
</nav><!-- /.navbar -->
</header><!-- /header -->
<!-- Barra testata di pagina -->
<div class="header-portfolio clearfix">
 <h2 class="pull-left">Portfolio</h2>
 <ul class="breadcrumb pull-right">
  <li><a href="home.html">Home</a></li>
  <li class="active">Portfolio</li>
</ul>
</div>
<!-- Contenuti (griglia) -->
<div class="container">
<section id="portfolio">
<div class="row">
<div class="col-xs-6 col-sm-3">
 <div class="portfolio-thumbnail">
  <a data-toggle="modal" href="#modal-1">
  <img src="assets/img/fancybox/pretty-1-th.jpg" alt="">
  <div class="portfolio-caption">
   <h4 class="text-center">Lorem ipsum</h4>
  </div>
  </a>
 </div>
</div>
<div class="col-xs-6 col-sm-3">
 <div class="portfolio-thumbnail">
  <img src="assets/img/fancybox/pretty-2-th.jpg" alt="">
  <div class="portfolio-caption">
   <h4 class="text-center">Lorem ipsum</h4>
  </div>
 </div>
</div>
<div class="col-xs-6 col-sm-3">
 <div class="portfolio-thumbnail">
  <img src="assets/img/fancybox/pretty-3-th.jpg" alt="">
  <div class="portfolio-caption">
   <h4 class="text-center">Lorem ipsum</h4>
  </div>
 </div>
</div>
<div class="col-xs-6 col-sm-3">
 <div class="portfolio-thumbnail">
  <img src="assets/img/fancybox/pretty-4-th.jpg" alt="">
  <div class="portfolio-caption">
   <h4 class="text-center">Lorem ipsum</h4>
  </div>
 </div>
</div>
<div class="col-xs-6 col-sm-3">
 <div class="portfolio-thumbnail">
  <img src="assets/img/fancybox/pretty-1-th.jpg" alt="">
  <div class="portfolio-caption">
   <h4 class="text-center">Lorem ipsum</h4>
  </div>
 </div>
</div>
<div class="col-xs-6 col-sm-3">
 <div class="portfolio-thumbnail">
  <img src="assets/img/fancybox/pretty-2-th.jpg" alt="">
  <div class="portfolio-caption">
   <h4 class="text-center">Lorem ipsum</h4>
  </div>
 </div>
</div>
<div class="col-xs-6 col-sm-3">
 <div class="portfolio-thumbnail">
  <img src="assets/img/fancybox/pretty-3-th.jpg" alt="">
  <div class="portfolio-caption">
   <h4 class="text-center">Lorem ipsum</h4>
  </div>
 </div>
</div>
<div class="col-xs-6 col-sm-3">
 <div class="portfolio-thumbnail">
  <img src="assets/img/fancybox/pretty-4-th.jpg" alt="">
  <div class="portfolio-caption">
   <h4 class="text-center">Lorem ipsum</h4>
  </div>
 </div>
</div>
<div class="col-xs-6 col-sm-3">
 <div class="portfolio-thumbnail">
  <img src="assets/img/fancybox/pretty-1-th.jpg" alt="">
  <div class="portfolio-caption">
   <h4 class="text-center">Lorem ipsum</h4>
  </div>
 </div>
</div>
<div class="col-xs-6 col-sm-3">
 <div class="portfolio-thumbnail">
  <img src="assets/img/fancybox/pretty-2-th.jpg" alt="">
  <div class="portfolio-caption">
   <h4 class="text-center">Lorem ipsum</h4>
  </div>
 </div>
</div>
<div class="col-xs-6 col-sm-3">
 <div class="portfolio-thumbnail">
  <img src="assets/img/fancybox/pretty-3-th.jpg" alt="">
  <div class="portfolio-caption">
   <h4 class="text-center">Lorem ipsum</h4>
  </div>
 </div>
</div>
<div class="col-xs-6 col-sm-3">
 <div class="portfolio-thumbnail">
  <img src="assets/img/fancybox/pretty-4-th.jpg" alt="">
  <div class="portfolio-caption">
   <h4 class="text-center">Lorem ipsum</h4>
  </div>
 </div>
</div>
</div>
</section>
<!-- Tabelle prezzi -->
<section id="servizi">
<header class="header-sezione">
 <h2>Servizi e offerte</h2>
</header>
<div class="row">
<div class="col-sm-4">
 <ul class="list-group servizi">
  <li class="list-group-item servizi-portfolio-titolo"><h4>Opzione Free</h4></li>
  <li class="list-group-item servizi-portfolio-prezzo"><strong>Gratuito</strong></li>
  <li class="list-group-item servizi-portfolio-opzione">Dapibus ac facilisis in</li>
  <li class="list-group-item servizi-portfolio-opzione">Morbi leo risus</li>
  <li class="list-group-item servizi-portfolio-opzione">Porta ac consectetur ac</li>
  <li class="list-group-item servizi-portfolio-opzione">Vestibulum at eros</li>
  <li class="list-group-item servizi-portfolio-footer"><button class="btn btn-info btn-block btn-round-bottom" type="button">Abbonati</button></li>
 </ul>
</div>
<div class="col-sm-4">
 <ul class="list-group servizi">
  <li class="list-group-item servizi-portfolio-titolo"><h4>Opzione Pro</h4></li>
  <li class="list-group-item servizi-portfolio-prezzo"><strong>&euro; 5.99 al mese</strong></li>
  <li class="list-group-item servizi-portfolio-opzione">Dapibus ac facilisis in</li>
  <li class="list-group-item servizi-portfolio-opzione">Morbi leo risus</li>
  <li class="list-group-item servizi-portfolio-opzione">Porta ac consectetur ac</li>
  <li class="list-group-item servizi-portfolio-opzione">Vestibulum at eros</li>
  <li class="list-group-item servizi-portfolio-footer"><button class="btn btn-info btn-block btn-round-bottom" type="button">Abbonati</button></li>
</ul>
</div>
<div class="col-sm-4">
 <ul class="list-group servizi">
  <li class="list-group-item servizi-portfolio-titolo"><h4>Opzione Super</h4></li>
  <li class="list-group-item servizi-portfolio-prezzo"><strong>&euro; 9.99 al mese</strong></li>
  <li class="list-group-item servizi-portfolio-opzione">Dapibus ac facilisis in</li>
  <li class="list-group-item servizi-portfolio-opzione">Morbi leo risus</li>
  <li class="list-group-item servizi-portfolio-opzione">Porta ac consectetur ac</li>
  <li class="list-group-item servizi-portfolio-opzione">Vestibulum at eros</li>
  <li class="list-group-item servizi-portfolio-footer"><button class="btn btn-info btn-block btn-round-bottom" type="button">Abbonati</button></li>
</ul>
</div>
</div>
</section>
<div class="row">
<div class="col-sm-12">
<nav id="portfolio-pagination" class="text-center">
<ul class="pagination pagination-large">
 <li class="disabled"><a href="#">&laquo;</a></li>
 <li class="active"><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">&raquo;</a></li>
</ul>
</nav>
</div>
</div>
</div><!-- /.container -->
<!-- Footer -->
<footer>
<section id="footer-navigazione">
<div class="row">
<div class="col-sm-4">
 <h3>Lorem ipsum</h3>
 <p>Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus, comodo egetine metuss gorp.</p>
 <h3>Newsletter</h3>
 <div class="input-group col col-lg-10">
  <input type="text" class="form-control">
  <span class="input-group-btn">
   <button class="btn btn-success" type="button">Iscriviti!</button>
  </span>
 </div>
</div>
<div class="col-sm-4">
 <h3>Ultimi post</h3>
 <ul class="media-list">
  <li class="media">
   <img class="media-object pull-left" src="assets/img/post-thumb-1.jpg">
   <div class="media-body">
   <h5 class="media-heading">Titolo post</h5>
   <p>Donec id elit non mi porta gravida at eget metus id elit mi egetine.</p>    
   </div>
  </li>
  <li class="media">
   <img class="media-object pull-left" src="assets/img/post-thumb-2.jpg">
   <div class="media-body">
   <h5 class="media-heading">Titolo post</h5>
   <p>Donec id elit non mi porta gravida at eget metus id elit mi egetine.</p>    
   </div>
  </li>
  <li class="media">
   <img class="media-object pull-left" src="assets/img/post-thumb-3.jpg">
   <div class="media-body">
   <h5 class="media-heading">Titolo post</h5>
   <p>Donec id elit non mi porta gravida at eget metus id elit mi egetine.</p>    
   </div>
  </li>
 </ul>
</div>
<div class="col-sm-4">
 <h3>Contatti</h3>
 <address>
  <strong>FakeBoot, Inc.</strong><br>
  Via dei Cavalieri, 600<br>
  Roma, 00100, Italy<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
 </address>
 <address>
  <strong>E-mail</strong><br>
  <a href="mailto:#">info@fakeboot.com</a>
 </address>
</div>
</div>
</section>
<section id="footer-copy">
<div class="row">
<div class="col-sm-12">
 <p class="right">&copy; 2013 HTML.it. &middot; <a href="#">Privacy</a></p>
</div>
</div>
</section>
</footer>
<div class="modal fade" id="modal-1">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">Sito di Lorem.com</h4>
   </div>
   <div class="modal-body">
    <img src="assets/img/fancybox/pretty-1.jpg" alt="" class="img-responsive">
   </div>
   <div class="modal-footer">
    <a href="#" class="btn btn-primary">Visita il sito</a>
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- jQuery e plugin JavaScript  -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/flexslider/jquery.flexslider.js"></script>
<script src="assets/plugins/fancybox/jquery.fancybox.pack.js"></script>
<script src="assets/js/scripts.js"></script>
</body>
</html>